<html>

<head>
    <style>
        .main {
            background-color: blue;
            width: 500px;
            height: 500px;
            font-size: 30px;
            text-align: center;
            line-height: 500px;
            color: white;
            float:left;
        }
        .second{
            clear: both;
        }
    </style>

    <script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    <div class="main" id="app">123{{ message }}</div>
    <div class="second"><button id="one">隐藏</button><button id="two">显示</button></div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'hello,world!'
            },
            methods:{
                abc:function(){
                    alert("1");
                },
                cde:function(){
                    alert("2");
                }
            },
            mounted:function(){
                this.abc();
                this.cde();
            }
        });

        $(document).ready(function () {
            $("#one").click(function () {
                $("#app").hide();
            });
            $("#two").click(function () {
                $("#app").show();
            });
        });
    </script>
</body>

</html>